import React, { Component } from "react";
import moment from "moment";
import Empty from "./../common/Empty";
import Page from "./../common/Page";
import styles from "./SubAd.module.scss";
import api from "../../serve/api";
import { withRouter } from "react-router-dom";
import { empty } from "rxjs";

class Activity extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ads: []
    };
    this.clientA = this.clientA.bind(this);
  }
  componentDidMount() {
    let datas = this.props.datas;
    this.getThemeAds(datas.id);
  }

  async getThemeAds(id) {
    let data = await api.getThemeAdsByType({ id: id });
    if (data && data.code === "000000") {
      console.log("res", data.result);
      this.setState({
        ads: data.result || []
      });
    }
  }
  clientA(id) {
    this.props.history.push(`/mainPage/AdDetail/themeAd/${id}`);
  }

  clientMore() {
    let { match } = this.props;
    let id = match.params.id;
    this.props.history.push(`/mainPage/themeAdType/${id}`);
  }

  render() {
    const { datas } = this.props;
    const { ads } = this.state;

    return (
      <div>
        <div id={"aaa" + datas.id} className={styles.container}>
          <h1 className={styles.adtitle}>
            {datas.name}
            <p className={styles.more} onClick={() => this.clientMore()}>
              more
            </p>
          </h1>
        </div>
        <div className={styles.content}>
          <ul className={styles.conul}>
            {ads.map((item, index) => {
              return (
                <li>
                  {/* <a className={styles.thumb} onClick={() => this.clientA(item.id)}>
                      <img src={item.img_url} width="108px" height="81px"></img>
                    </a> */}
                  <a
                    className={styles.title}
                    title
                    onClick={() => this.clientA(item.id)}
                  >
                    {item.title}
                  </a>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}

export default withRouter(Activity);
